<template>
    <div id="app" class="login-page">
      <div class="login-header">
        <img src="@/assets/supplier/title.jpg" alt="logo" class="logo" />
        <!-- <span class="system-name">森山 | 朴朴供应商系统</span> -->
      </div>
      <div class="login-container">
        <el-tabs v-model="activeTab" class="login-tabs" >
          <el-tab-pane  label="账号密码" name="number">
            <el-form-item>
                <el-input style="height: 54px;" v-model="loginForm.phone" placeholder="请输入您的手机号"></el-input>
            </el-form-item>

            <el-form-item>
                <el-input style="height: 54px;" v-model="loginForm.phone" placeholder="请输入您的密码"></el-input>
            </el-form-item>

            <el-form-item>
                <el-checkbox v-model="loginForm.agree">
                  我已阅读并同意朴朴《<a href="#" class="link">服务协议</a>》和《<a href="#" class="link">隐私政策</a>》
                </el-checkbox>
              </el-form-item>
              <el-form-item>
                <el-button type="primary"    @click="submitForm" class="submit-button">确 定</el-button>
              </el-form-item>
          </el-tab-pane>

          <el-tab-pane  label="微信扫码登录" name="wechat">

                <img src="@/assets/supplier/erweima.jpg" alt="logo" style="width: 280px;" />
                <el-checkbox v-model="loginForm.agree">
                    使用微信登录即代表您同意朴朴森山《<a href="#" class="link">服务协议</a>》和《<a href="#" class="link">隐私政策</a>》
                </el-checkbox>

          </el-tab-pane>

          <el-tab-pane  label="手机号登录" name="phone">
            <el-form :model="loginForm" class="login-form">
              <el-form-item>
                <el-input style="height: 54px;" v-model="loginForm.phone" placeholder="请输入您的手机号"></el-input>
              </el-form-item>
              <el-form-item class="verification-code">
                <el-input  style="height: 54px;" v-model="loginForm.verificationCode" placeholder="验证码"></el-input>
                <el-button style="height: 54px;"  @click="sendVerificationCode">发送验证码</el-button>
              </el-form-item>
              <el-form-item>
                <el-checkbox v-model="loginForm.agree">
                  我已阅读并同意朴朴《<a href="#" class="link">服务协议</a>》和《<a href="#" class="link">隐私政策</a>》
                </el-checkbox>
              </el-form-item>
              <el-form-item>
                <el-button type="primary"    @click="submitForm" class="submit-button">确 定</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

       
        </el-tabs>
      </div>
      <div class="login-footer">
        <p>供应商合作申请</p>
        <p>推荐使用谷歌浏览器，点击下载</p>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        activeTab: 'number',
        loginForm: {
          phone: '',
          verificationCode: '',
          agree: false,
        },
      };
    },
    methods: {
      sendVerificationCode() {
        // 发送验证码逻辑
        console.log('发送验证码');
      },
      submitForm() {
        // 提交表单逻辑
        console.log('提交表单', this.loginForm);
      },
    },
  };
  </script>
  
  <style scoped>
::v-deep .el-tabs__item{
    width: 120px;
  }
  .login-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* 添加此行 */
    background-size: 100% 100%;
    position: relative;
    background-image: url('../../assets/supplier/back.png');
    background-repeat: no-repeat;
    height: 100vh;
    color: #fff;
    padding-top: 50px;
  }
  
  .login-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .logo {
    width: 500px;
    height: 50px;
    margin-bottom: 10px;
  }
  
  .system-name {
    font-size: 24px;
    color: #fff;
  }
  
  .login-container {
    background: #fff;
    padding: 60px;
    /* border-radius: 8px; */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 500px;
  }
  
  .login-tabs {
    margin-top: 30px;
  }
  
  .login-form {
    margin-top: 20px;
  }
  
  .el-form-item {
    margin-bottom: 20px;
  }
  
  .verification-code {
    display: flex;
    justify-content: space-between;
  }
  
  .verification-code .el-input {
    flex: 1;
    margin-right: 10px;
  }
  
  .link {
    color: #00a65a;
    text-decoration: none;
  }
  
  .submit-button {
    width: 100%;
    height: 54px;
    background-color: #d9d9d9;
    border-color: #d9d9d9;
    font-size: 24px;
  }
  .submit-button:hover{
    background-color: #00a65a;
    border-color: #00a65a;

  }

  .login-footer {
    text-align: center;
    margin-top: 60px;
  }
  
  .login-footer p {
    margin: 5px 0;
  }

  /* 覆盖 Element UI 的默认样式 */
::v-deep .el-tabs__active-bar {
  background-color: #00a65a; /* 绿色 */
}

::v-deep .el-tabs__item.is-active {
  color: #00a65a; /* 绿色 */
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner{
    background-color: #00a65a; /* 绿色 */
    border-color: #00a65a;
}
::v-deep  .el-checkbox__input.is-checked+.el-checkbox__label{
    color: #000;
}
/* 新增 hover 样式 */
::v-deep .el-tabs__item:hover {
  color: #00a65a; /* 绿色 */
}
  </style>